RemixをBunで動かしてみる

はじめに

Remix v2,Bun v1 がリリースされました。 BunはJavaScriptの高速なランタイムです。年々Nodeが複雑になり、遅くなりなってきました。速くてAll　in　OneなJavascriptランタイムとして開発されました。Nodeとの互換性があるため、今までの資産も使え、置き換え比較的簡単です。 パッケージ管理やworkspaceもnpm互換で特にBun用になにか設定する必要はありません。

• Remix v2 | Remix
• Bun 1.0 | Bun Blog

このブログではBunでRemixを作ってみます。

Remixでプロジェクトを作成する

このあとのブログでCloudflare Pagesにsデプロイする予定なので、Cloudflare PagesテンプレートでRemixを作成します。

• Deploy a Remix site · Cloudflare Pages docs

Remixテンプレートを作成する

npmでとりあえずプロジェクトを作ってしまいます。

$ npm create cloudflare@latest image-upload-samples -- --framework=remix

基本的にyesで進めていき作成しました。npmを使うかもYesにしています。のちにこのサンプルで画像アップロードを作る予定なので、image-upload-samplesとしておきます。

とりあえず動作確認してみます。

$ cd image-upload-samples
$ npm run dev

http://localhost:8788/　にブラウザでアクセスと無事に表示されました。

以降コマンドはimage-upload-samples 以下で実行したものとします。

❯ tree -L 1
.
├── README.md
├── app
├── functions
├── node_modules
├── package-lock.json
├── package.json
├── public
├── remix.config.js
├── remix.env.d.ts
├── server.ts
└── tsconfig.json

bunをインストールする

$ curl -fsSL https://bun.sh/install | bash

• Bun — A fast all-in-one JavaScript runtime

参考までに、私はasdfを使っていますので、asdf-bunプラグインでインストールしています。

• cometkim/asdf-bun: asdf-vm plugin for installing Bun

npmからbunに変更

一旦 lockファイルなどを削除して、bunでインストールしなおします。

$ rm -rf node_modules/
$ rm package-lock.json
$ bun install
$ bun run dev

http://localhost:8788/　にブラウザでアクセスと無事に表示されました。

コマンド名がnpmからbunに変わったぐらいで特に以降するために必要なものはありません。

まとめ

bunになっても特にやることもなく素直に動いてくれました。 npmでパフォーマンス比較はこのブログではやりませんでしたが、とりあえず動作上動いてくれる感じでこのまま技術の素振りをやっていきたいと思います。